<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
		<title>商城-忘记密码</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<style type="text/css">
			body {
				background-color: #F5F5F5;
			}

			.aui-bar-nav .aui-pull-left {
				padding: 0 0.25rem;
			}

			.aui-list {
				padding: 0 0.75rem;
			}

			.aui-title {
				font-weight: bolder;
			}

			.aui-list-item- {
				height: 2.75rem;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.aui-list-item-label- img {
				width: 1rem;
			}

			.aui-btn-block {
				height: 2.3rem;
				line-height: 2.3rem;
				color: #FFFFFF;
				/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
				/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
				/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
			}

			.aui-btn {
				display: inline-block;
				width: 17.25rem;
				border-radius: 0.3rem;
				background:rgba(179,206,223,1);
				/*opacity:0.3;*/
				margin-left: 50%;
				transform: translateX(-50%);
			}

			.aui-text-linear {
				position: relative;
				background: linear-gradient(-152deg, #ee02fd, #9972e6);
				background: -webkit-linear-gradient(-152deg, #ee02fd, #9972e6);
				color: transparent;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			::placeholder {
				color: #BBBBBB;
				font-size: .75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				line-height: 1.05rem;
			}

			.aui-bg-linear {
				/*background: linear-gradient(-152deg, #ff00ff, #9b00ff);*/
				/*background: linear-gradient(270deg, #ff00ff, #9471da);*/
				/*background: linear-gradient(270deg, #ee02fd, #9972e6);*/
				background:rgba(0,90,147,1);
				/*border-radius:2.5rem;*/
			}

			.border-b {
				/*border-bottom: 1px solid rgba(238,238,238,.5);*/
				border: none;
				border-bottom: 1px solid rgba(238,238,238,.5);
			}

			.password_tip {
				margin-top:.5rem;
				font-size:.65rem;
				color: #999999;
				font-family:PingFangSC-Regular;
				font-weight:400;
				padding-left:.75rem;
			}
			.code {
				font-size: 0.75rem;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: rgba(0,90,147,1);
				opacity: 0.3;
				display: inline-block;
				width: auto;
			}

			.active_code {
				font-size: 0.75rem;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: rgba(114, 213, 239, 1);
			}
			.icon-clear{

			}
		</style>
	</head>

	<body>
		<div id="aui-header" class="ming-bg-blue">
			<header class="aui-bar aui-bar-nav ming-bg-blue aui-border-b">
				<a class="aui-pull-left" tapmode onclick="close_win()" style="padding-left:.75rem;">
					<img class="btn-img-back" src="../../image/btn/btn-back.png" />
				</a>
				<div class="aui-title">
					<div style="font-family:PingFangSC-Regular;font-size:.9rem;font-weight:500;color:rgba(255,255,255,1);">
						忘记密码
					</div>
				</div>
			</header>
		</div>

		<div class="aui-content" id="app" v-cloak="">
			<div class="aui-list aui-list-noborder">
				<!-- 手机号校验 -->
				<div class="aui-list-item- border-b" style="height:2.9rem">
					<div class="ming-pr" style="padding-top:.15rem;display:inline-block;width:90%;font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);">
						<input v-model="mobile" type="tel" maxlength="11" placeholder="请输入手机号" style="font-size: 0.75rem;"/>
						<img tapmode @click="mobile=''" v-if="mobile!=''" class="icon-clear" src="../../image/btn/btn-search-delete.png" />
					</div>
				</div>

				<!-- 验证码校验 -->
				<div class="aui-list-item- border-b" style="width:auto;font-size:0.75rem;">
					<div class="ming-pr">
						<input style="width:70%;font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);" v-model="sms_code" type="tel" maxlength="6" placeholder="请输入验证码" />
					</div>
					<!-- <div style="flex: 1;text-align: right;padding-left:.2rem;" tapmode onclick="getCode()">
						<span  style="color:#72D5EF;font-size:.75rem;font-family:PingFangSC-Regular;font-weight:400;">{{sms_time}}</span>
					</div> -->
					<div style="flex: 0.5;text-align: right;padding-left:.2rem;" tapmode onclick="getCode()" v-if="mobile.length == 11">
						<span class="active_code">{{sms_time}}</span>
					</div>

					<div style="text-align: right;padding-left:.2rem;" v-else>
						<span class="code">{{sms_time}}</span>
					</div>
				</div>

				<!-- 密码校验 -->
				<div class="aui-list-item-">
					<div class="ming-pr" style="margin-right: 1rem;flex: 1;font-size:0.75rem;">
						<input style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);" v-model="pwd" v-bind:type.prop=type placeholder="请输入新密码" />
						<img tapmode @click="pwd=''" v-if="pwd!=''" class="icon-clear" src="../../image/btn/btn-search-delete.png" />
					</div>
					<div style="width: 1rem;text-align: right;" tapmode onclick='show_pwd()'>
						<img v-if="!is_show" style="display: inline-block;width: 1rem;vertical-align: middle;" src="../../image/icon/icon-noeye.png" />
						<img v-if="is_show" style="display: inline-block;width: 1rem;vertical-align: middle;" src="../../image/icon/icon-eye.png" />
					</div>
				</div>
			</div>

			<!-- 密码提示 说明 -->

			<!-- <div class="password_tip">密码由6-20位数字/字母组成，注意区分大小写</div> -->

			<div class="aui-padded-l-10 aui-padded-r-10" style="margin-top: 2rem;">
				<div class="aui-btn aui-btn-block" :class="{'aui-bg-linear':mobile!=''&&sms_code!=''&&pwd!=''}" tapmode onclick="setPasswd()">
					确定
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/verify.js"></script>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				mobile: '',
				pwd: '',
				sms_code: '',
				is_show: false,
				type: 'password',
				sms_time: '获取验证码',
			},
		})
		apiready = function() {
			$api.fixStatusBar($api.byId('aui-header'))
			api.setStatusBarStyle({
				style: 'dark'
			});
		};

		function getCode() {
			if(!isPoneAvailable(vm.mobile)) {
				toast('请输入正确的手机号')
				return;
			}
			if(vm.sended) {
				return;
			}
			get_data('api/Sms/sendAuthCode', {
				mobile: vm.mobile,
				flag: 1
			}, function(ret) {
				//从服务器请求验证码并返回结果，如果已发送操作如下：
				if(ret.status == '1') {
					vm.sended = 1;
					var timer = 60;
					vm.sms_time = timer + 's'
					var ti = setInterval(function() {
						timer = timer - 1;
						vm.sms_time = timer + 's';
						if(timer < 0) {
							vm.sended = 0;
							vm.sms_time = '获取验证码';
							clearInterval(ti);
						}
					}, 1000);
				}
				toast(ret.msg)
			})
		}

		function show_pwd() {
			vm.is_show = !vm.is_show
			if(vm.is_show) {
				vm.type = 'text'
			} else {
				vm.type = 'password'
			}
		}

		function setPasswd() {
			if(vm.sms_code == '' || vm.mobile == '' || vm.pwd == '') {
				return;
			}
			if(vm.sms_code.length != 6) {
				toast('验证码错误');
				return;
			}
			if(!isPoneAvailable(vm.mobile)) {
				toast('请输入正确的手机号')
				return;
			}
			get_data('api/login/setPasswd', {
				password: vm.pwd,
				mobile: vm.mobile,
				authCode: vm.sms_code,
			}, function(ret) {
				if(ret.status) {
					openWin_login()
					setTimeout(function() {
						close_win()
					}, 1000)
				} else {
					toast(ret.msg)
				}
			})
		}
	</script>

</html>
